<template>
	<div class="GameDetail">
		<GameDetail-header></GameDetail-header>
		<GameDetail-hotList 
			:HotLeagueList='HotLeagueList' 
			@checkLeagueList='checkLeagueList'
		></GameDetail-hotList>
		<GameDetail-list :list='list' :currentleagueName='currentleagueName'></GameDetail-list>
	</div>	
</template>
<script>
import GameDetailHeader from './components/Header'
import GameDetailHotList from './components/hotList'
import GameDetailList from './components/List'
import axios from 'axios'
import { Toast,Indicator  } from 'mint-ui'
export default {
	name: 'GameDetail',
	components:{
		GameDetailHotList,
		GameDetailHeader,
		GameDetailList
	},
	data:function(){
		return {
			currentleagueName:'',
			HotLeagueList:[],
			HotLeagueListShow:false,
			list:[]
		}
	},
	methods:{
		//获取热门联赛
		getHotLeagueList:function(){
			var t = this;
          	axios.get('/api/getHotLeagueList.php')
	            .then(function(res) {
	            	res = res.data
			        if (res.status == 0 && res.data) {
			            const data =  res.data
			            t.HotLeagueList = data
			            t.currentleagueName =  data[0].name;
			            t.getLeagueScheduleByDate(data[0].tournament_stage_id)
			       }
	            })
            	.catch(function (error) {
	               Toast(error);
	            });
        },
        // 获取赛程,日期分组
        getLeagueScheduleByDate(id){
        	Indicator.open({
			  text: '加载中···',
			  spinnerType: 'fading-circle'
			});
        	var t = this;
          	axios.get('/api/getLeagueScheduleByDate.php?tournament_stage_id='+id)
	            .then(function(res) {
	            	res = res.data
			        if (res.status == 0 && res.data) {
			            const data =  res.data
			            t.list = data.match
			       }
			       Indicator.close();
	            })
            	.catch(function (error) {
            		Indicator.close();
	            	Toast(error);
	            });
        },
        checkLeagueList(obj){
        	this.currentleagueName = obj.name
        	this.getLeagueScheduleByDate(obj.id)
        }
	},
	created(){
		this.getHotLeagueList();
	}

};
</script>
<style lang="less" scoped>
	@import '~styles/varibles.less';
	.title{
		height: .9rem;
	    line-height: .9rem;
	    width: 100%;
	    text-align: center;
	    background:@greenColor1;
	    font-size: .36rem;
	    color: #fff;
	    position: fixed;
	    top: 0;
	    left: 0;
	    z-index: 999;
	}
</style>